<template>
  <view class="tab-container">
    <view class="tab-view">
      <view class="card">
        <view style="font-size: 70rpx; margin: 5px 0">
          <text>{{ title }}</text>
        </view>
        <view style="margin-bottom: 50rpx">
          <view style="font-size: 30rpx; margin-top: 30rpx; display: flex">
            <text>汇报时间:</text>
            <text style="margin-left: 10rpx">{{ reportDate }}</text>
          </view>
          <view style="font-size: 30rpx; margin-top: 30rpx; display: flex; flex-wrap: wrap">
            汇报给:
            <view style="margin-left: 10rpx; color: red">
              <text>{{ shareUserName }}</text>
            </view>
            <plus-icon @onSelect="handleOnSelect"></plus-icon>
          </view>
        </view>
      </view>
      <!-- 工作内容 -->
      <view class="card">
        <view class="tab-view">
          <text style="font-size: 40rpx">
            <text style="color: red">*</text>
            {{ noteTitle.workNote }}
          </text>
          <sp-editor
              style="height: 600rpx"
              :toolbar-config="{
							excludeKeys: ['direction', 'date', 'lineHeight', 'letterSpacing', 'listCheck', 'video', 'link', 'undo', 'redo', 'removeFormat', 'export', 'clear'],
							iconSize: '20px'
						}"
              @input="onWorkNote"
              @upinImage="upinImage"
          ></sp-editor>
        </view>
      </view>
      <view class="card">
        <view class="tab-view">
          <text style="font-size: 40rpx">{{ noteTitle.planNote }}</text>
          <sp-editor
              style="height: 600rpx"
              :toolbar-config="{
							excludeKeys: ['direction', 'date', 'lineHeight', 'letterSpacing', 'listCheck', 'video', 'link', 'undo', 'redo', 'removeFormat', 'export', 'clear'],
							iconSize: '20px'
						}"
              @input="onPlanNote"
              @upinImage="upinImage"
          ></sp-editor>
        </view>
      </view>
      <view class="card">
        <!-- 其他事项 -->
        <view class="tab-view">
          <text style="font-size: 40rpx">{{ noteTitle.otherNote }}</text>
          <sp-editor
              style="height: 600rpx"
              :toolbar-config="{
							excludeKeys: ['direction', 'date', 'lineHeight', 'letterSpacing', 'listCheck', 'video', 'link', 'undo', 'redo', 'removeFormat', 'export', 'clear'],
							iconSize: '20px'
						}"
              @input="onOtherNote"
              @upinImage="upinImage"
          ></sp-editor>
        </view>
      </view>
      <view class="card">
        <view style="display: flex; flex-direction: column">
          <l-file ref="lFile" @up-success="onSuccess"></l-file>
          <text style="margin: 10rpx 0">上传附件</text>
          <button style="margin: 30rpx" @click="onUploadAttachment">上传附件</button>
          <view style="display: flex">
            <text style="margin: 10rpx 0; font-size: 30rpx">上传文件:{{ attachmentFileName }}</text>
            <button v-if="attachmentFileName" size="mini" type="primary" @click="onDelAttachment">删除</button>
          </view>
        </view>
        <view style="margin: 80rpx 0">
          <button type="primary" @click="submit" style="width: 400rpx">提交</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {BaseUrl} from '@/api/report/utils/request';
import lFile from '@/uni_modules/l-file/components/l-file/l-file.vue';
import PlusIcon from '@/pages/tab2/components/sender.vue';
import auth from '@/utils/auth.js';
import {uploadAttachment, createReport} from '@/api/report/report';
import {getCurrentWeekRange, getCurrentMonthRange} from '@/api/report/utils/utils';

export default {
  // props: {
  // 	title: {
  // 		type: String,
  // 		require: true
  // 	},
  // 	reportType: {
  // 		type: Number,
  // 		require: true
  // 	},
  // 	reportDate: {
  // 		type: String,
  // 		require: true
  // 	},
  // 	noteTitle: {
  // 		type: Object,
  // 		default: () => ({
  // 			workNote: '',
  // 			planNote: '',
  // 			otherNote: ''
  // 		})
  // 	}
  // },
  onLoad(query) {
    switch (Number(query.id)) {
      case 0:
        this.reportType = 1;
        this.noteTitle = {
          workNote: '今日工作总结',
          planNote: '明日工作计划',
          otherNote: '其他事项'
        };
        this.title = '日报';
        this.reportDate = '今天09:00 至 今天18:30';
        break;
      case 1:
        this.reportType = 2;
        this.noteTitle = {
          workNote: '本周工作总结',
          planNote: '下周工作计划',
          otherNote: '其他事项'
        };
        this.title = '周报';
        this.reportDate = getCurrentWeekRange();
        break;
      case 2:
        this.reportType = 3;
        this.noteTitle = {
          workNote: '本月工作总结',
          planNote: '下月工作计划',
          otherNote: '其他事项'
        };
        this.title = '月报';
        this.reportDate = getCurrentMonthRange();
        break;
    }
  },
  mounted() {
    console.log(this.reportType)

  },
  components: {
    PlusIcon,
    lFile
  },
  data() {
    return {
      reportType: '',
      title: '',
      reportDate: '',
      noteTitle: {
        workNote: '',
        planNote: '',
        otherNote: ''
      },
      noteConext: {
        workNote: null,
        planNote: null,
        otherText: null
      },
      userId: auth.getUser().userId,
      reportId: null,
      shareId: null,
      shareUserName: '',
      attachmentFileName: null,
      attachmentPath: ''
    };
  },
  methods: {
    onDelAttachment() {
      this.attachmentFileName = null;
      this.attachmentPath = '';
    },
    /**  选择汇报人回调
     * @param {Object} e
     */
    handleOnSelect(e) {
      if (e.length === 0) {
        this.shareId = null;
        this.shareUserName = '';
        return;
      }
      this.shareUserName = e.map((item) => item.name).join(',');
      this.shareId = e.map((item) => item.id).join(',');
    },
    /**
     * 附件上传
     */
    onUploadAttachment() {
      uploadAttachment(this);
    },
    onSuccess(res) {
      if (res.data === '上传文件失败') {
        uni.showToast({
          title: '文件上传失败!',
          icon: 'none'
        });
        return;
      }
      uni.showToast({
        title: '附件上传成功!',
        icon: 'none'
      });
      console.log('上传成功回调', JSON.stringify(res));
      this.attachmentFileName = res.fileName;
      this.attachmentPath = res.data;
    },
    submit() {
      if (this.shareId == null) {
        uni.showToast({
          title: '请选择汇报人在提交吧!',
          icon: 'none'
        });
        return;
      }
      if (this.noteConext.workNote == null || this.noteConext.workNote.text == '\n') {
        uni.showToast({
          title: this.noteTitle.workNote + '必须填写!',
          icon: 'none'
        });
        return;
      }
      let _this = this;
      let data = {
        reportType: this.reportType,
        reportDate: this.reportDate,
        workNote: this.noteConext.workNote,
        planNote: this.noteConext.planNote,
        otherText: this.noteConext.otherText,
        attachmentPath: this.attachmentPath,
        attachmentFileName: this.attachmentFileName,
        shareId: this.shareId,
        userId: this.userId
      };
      uni.showModal({
        title: '提示',
        content: '您是否要提交汇报?',
        confirmText: '确定',
        cancelText: '取消',
        success(res) {
          if (res.confirm) {
            createReport(data).then((res) => {
              if (res.code == 200) {
                _this.noteConext = {
                  workNote: '',
                  planNote: '',
                  otherText: ''
                };
                _this.attachmentFileName = '';
                _this.sender = null;
                uni.showToast({
                  title: '提交成功!',
                  icon: 'none'
                });

                uni.redirectTo({
                  url: `/pages/tab2/record/index?reportType=${_this.reportType}`
                });
                // _this.$emit('onSucess');
              }
            });
          } else if (res.cancel) {
          }
        }
      });
    },

    //富文本 回调方法
    /**
     * 获取输入内容
     * @param {Object} e {html,text} 内容的html文本，和text文本
     */
    onWorkNote(e) {
      this.noteConext.workNote = e;
    },
    onPlanNote(e) {
      this.noteConext.planNote = e;
    },
    onOtherNote(e) {
      this.noteConext.otherText = e;
    },

    /**
     * 直接运行示例工程插入图片无法正常显示的看这里
     * 因为插件默认采用云端存储图片的方式
     * 以$emit('upinImage', tempFiles, this.editorCtx)的方式回调
     * @param {Object} tempFiles
     * @param {Object} editorCtx
     */
    upinImage(tempFiles, editorCtx) {
      console.log(tempFiles);
      tempFiles.forEach(async (item) => {
        uni.uploadFile({
          url: BaseUrl + '/api/upload/file',
          filePath: item.path,
          formData: {
            type: 'pic'
          },
          name: 'file',
          success: (result) => {
            uni.hideLoading();
            const param = result.data.split('/');
            editorCtx.insertImage({
              src: BaseUrl + '/api/pic/get?path=' + param[0] + '&filename=' + param[1],
              width: '30%', // 默认不建议铺满宽度100%，预留一点空隙以便用户编辑
              success: function () {
                console.log(result);
              }
            });
          }
        });
      });
    }
  }
};
</script>

<style scoped>
.line {
  height: 1px;
  background-color: #ccc;
  margin: 10rpx 0;
}

.card {
  margin: 10rpx 0;
  background-color: #fff;
  padding: 20rpx;
  border-radius: 10rpx;
}

.textarea {
  width: 100%;
  height: 300rpx;
  margin: 10rpx 0;
  padding: 0rpx;
  border: 1px solid #ccc;
  /* 添加边框 */
  border-radius: 5rpx;
  /* 设置圆角 */
  font-size: 28rpx;
  /* 设置字体大小 */
}

.tab-view {
  margin: 10rpx;
  display: flex;
  flex-direction: column;
}

.tab-container {
  width: calc(100vw - 10rpx);
  border-radius: 10rpx;
  /* background-color: #fff; */
}
</style>
